<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link
            href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="../css/wwl/registered.css" />
    </head>
    <body>
        <div class="login-air">
            <form>
                <div class="form-group" id="user">
                    <label class="control-label" for="user1">用户名：</label>
                    <input
                        type="text"
                        class="form-control"
                        id="inputUser1"
                        placeholder="用户名"
                        name="user"
                        aria-describedby="help-block1"
                        data-container="body"
                        data-toggle="popover"
                        data-placement="right"
                        data-content="请输入4-15个字母或数字(包含大小写，下滑线)"
                    />
                    <span id="help-block" class="help-block"
                        >4-15个字母或数字(包含大小写，下滑线)</span
                    >
                </div>
                <div class="form-group" id="password">
                    <label class="control-label" for="password1">密码：</label>
                    <input
                        type="password"
                        class="form-control"
                        id="inputPassword1"
                        placeholder="密码"
                        name="password"
                        aria-describedby="help-block2"
                        data-container="body"
                        data-toggle="popover"
                        data-placement="right"
                        data-content="以字母开头，必须包含大小写字母和数字的组合，可以使用特殊字符，长度在6位以上"
                    />
                    <span id="help-block" class="help-block"
                        >以字母开头，必须包含大小写字母和数字的组合，可以使用特殊字符，长度在6位以上！</span
                    >
                </div>
                <div class="form-group" id="name">
                    <label class="control-label" for="name">真实姓名：</label>
                    <input
                        type="text"
                        class="form-control"
                        id="inputName1"
                        name="name"
                        placeholder="用户名"
                        aria-describedby="help-block1"
                        data-container="body"
                        data-toggle="popover"
                        data-placement="right"
                        data-content="请填写真实姓名"
                    />
                    <span id="help-block" class="help-block">请填写中文！</span>
                </div>
                <div class="form-group" id="phone">
                    <label class="control-label" for="phone">联系电话：</label>
                    <input
                        type="text"
                        class="form-control"
                        id="inputPone1"
                        name="phone"
                        placeholder="电话"
                        aria-describedby="help-block1"
                        data-container="body"
                        data-toggle="popover"
                        data-placement="right"
                        data-content="请输入11位的中国电话号码"
                    />
                    <span id="help-block" class="help-block"
                        >电话号码有误！</span
                    >
                </div>
                <div class="checkbox row">
                    <label class="col-md-11 col-md-offset-1 control-label">
                        <input
                            type="checkbox"
                            id="protocol"
                        />我已同意并阅读用户协议（点击查看协议）
                    </label>
                </div>
                <button
                    type="submit"
                    class="btn btn-default btn-block"
                    id="registered"
                >
                    注册
                </button>
            </form>
        </div>
        <!-- Modal -->
        <div
            class="modal fade"
            id="myModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="myModalLabel"
        >
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button
                            type="button"
                            class="close"
                            data-dismiss="modal"
                            aria-label="Close"
                        >
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">用户协议</h4>
                    </div>
                    <div class="modal-body">
                        一、特别提示<br />
                        在此特别提醒您(用户)在注册成为OA系统用户之前，请认真阅读本《公司服务协议》(以下简称“协议”)，确保您充分理解本协议中各条款。请您审慎阅读并选择接受或不接受本协议。
                        除非您接受本协议所有条款，否则您无权注册、登录或使用本协议所涉服务。您的注册、登录、使用等行为将视为对本协议的接受，并同意接受本协议各项条款的约束。<br />
                        本协议约定本公司与用户之间关于“OA后台系统”服务(以下简称“服务”)的权利义务。
                        “用户”是指注册、登录、使用本服务的个人。本协议可由公司内部随时更新，更新后的协议条款一旦公布即代替原来的协议条款，恕不再另行通知，用户可在本APP中查阅版协议条款。
                        在修改协议条款后，如果用户不接受修改后的条款，请立即停止使用OA后台系统提供的服务，用户继续使用OA后台提供的服务将被视为接受修改后的协议。<br />
                        二、账号注册<br />
                        1、用户在使用本服务前需要注册一个“OA后台”账号。“OA后台”账号应当使用手机号码绑定注册，请用户使用尚未与“后台”账号绑定的手机号码，以及未被后台管理公司根据本协议封禁的手机号码注册“OA后台”账号。后台管理公司可以根据用户需求或产品需要对账号注册和绑定的方式进行变更，而无须事先通知用户。<br />
                        2、如果注册申请者有被其他平台封禁的先例或涉嫌虚假注册及滥用他人名义注册，及其他不能得到许可的理由，后台管理者将拒绝其注册申请。<br />
                        3、鉴于“OA后台”账号的绑定注册方式，您同意后台管理公司在注册时将允许您的手机号码及手机设备识别码等信息用于注册。<br />
                        4、在用户注册及使用本服务时，后台管理公司需要搜集能识别用户身份的个人信息以便后台管理公司可以在必要时联系用户，或为用户提供更好的使用体验。后台管理公司搜集的信息包括但不限于用户的姓名、地址;后台管理公司同意对这些信息的使用将受限于第三条用户个人隐私信息保护的约束。<br />
                        三、账户安全<br />
                        1、用户一旦注册成功，成为OA后台的用户，将得到一个用户名和密码，并有权利使用自己的用户名及密码随时登陆OA后台。
                    </div>
                    <div class="modal-footer">
                        <button
                            type="button"
                            class="btn btn-default"
                            data-dismiss="modal"
                            id="no"
                        >
                            取消
                        </button>
                        <button type="button" class="btn btn-primary" id="yes">
                            同意协议
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <script>
            let rules = {
                user: {
                    reg: /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/,
                },
                password: {
                    reg: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$/,
                },
                name: {
                    reg: /[\u4e00-\u9fa5]+/,
                },
                phone: {
                    reg: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
                },
            };
            let account = {};
            $("#protocol").on("click", function () {
                $("#myModal").modal("show");
            });
            $("#yes").on("click", function () {
                $("#myModal").modal("hide");
            });
            $("#no").on("click", function () {
                $("#protocol").prop("checked", false);
            });
            let input = $(".form-group>input");
            for (let i = 0; i < input.length; i++) {
                let inputIndex = input.eq(i);
                inputIndex.on("focus", function () {
                    inputIndex.popover("show");
                });
                inputIndex.on("blur", function (event) {
                    inputIndex.popover("hide");
                    let target = event.target;
                    let value = target.value.trim();
                    let name = target.name;
                    let rule = rules[name];
                    let reg = rule.reg;
                    if (reg.test(value) && value !== "null") {
                        inputIndex
                            .next()
                            .hide()
                            .parent()
                            .removeClass("has-error")
                            .addClass("has-success");
                        account[name] = value;
                        console.log(account);
                    } else {
                        inputIndex
                            .next()
                            .show()
                            .parent()
                            .removeClass("has-success")
                            .addClass("has-error");
                    }
                });
            }

            $("#registered").on("click", function (event) {
                event.preventDefault();
                let span = input.next();
                let arr = [];
                let checked = $("#protocol").prop("checked");
                arr.push(checked);
                for (let j = 0; j < input.length; j++) {
                    const element = input.eq(j);
                    if (element.val() === "") {
                        element
                            .next()
                            .show()
                            .parent()
                            .removeClass("has-success")
                            .addClass("has-error");
                    }
                }
                for (let i = 0; i < span.length; i++) {
                    arr.push(span.eq(i).is(":hidden"));
                }
                if (arr.includes(false)) {
                    localStorage.removeItem("account");
                    alert("请检查所有填写的项目");
                } else {
                    localStorage.setItem("account", JSON.stringify(account));
                    window.open("login.html");
                }
            });
        </script>
    </body>
</html>
